<template>
  <div>
    <h1>Parent:{{msg}}</h1>

    <!-- 1.直接使用v-model数据双向绑定 -->
   <div>
    <h2>1.直接使用v-model数据双向绑定</h2>
    <input type="text" v-model="msg">
   </div>

    <!-- 2.使用v-model本质上数据双向绑定 -->
    <div>
      <h2>2.使用v-model本质上数据双向绑定</h2>
      <input type="text" :value="msg" @input="msg = $event.target.value">
    </div>


    <!-- 3.使用v-modle本质上进行父子组件数据双向绑定 -->
    <Child :value="msg" @input="msg = $event"/>

    <!-- 4.使用v-modle进行父子组件数据双向绑定 -->
    <Child v-model="msg"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  components: {
    Child,
  },
  data() {
    return {
      msg: "helloWord"
    }
  },
};
</script>

<style></style>
